<!DOCTYPE html>
<html>
<head>
    <title>2生命周期</title>
     <script src="../js/vue.min.js"></script> 
</head>
<body>
    <!-- Your HTML code goes here -->
    <div id="root">
        n当前值: {{n}}
        <button @click="add">+1</button> 
    </div>
</body>
<script>
    const vm = new Vue({
        el: "#root",
        // template: `n当前值: {{n}}
        // <button @click="add">+1</button> `, // root div的内容就不需要写了, root 节点也没了.
        data: {
            n: 0
        },
        methods: {
            add() {
                this.n += 1
            }
        },
        beforeCreate() {
            console.log('beforeCreate',this.n)
            console.log('beforeCreate', this)
        },
        created() {
            console.log('created', this.n)
            console.log('created', this)
        },
        beforeMount() {
            document.querySelector('#root').style.display = 'none' // 不生效, 虚拟dom会覆盖模版内容
            console.log('beforeMount', this.n)
            console.log('beforeMount', this)
        },
        mounted() {
            document.querySelector('#root').innerText = 'hello, world' // 生效
            console.log('mounted', this.n)
            console.log('mounted', this)
        },
        beforeUpdate() {
            console.log('beforeUpdate', this.n)
            console.log('beforeUpdate', this)
        },
        updated() {
            console.log('updated', this.n)
            console.log('updated', this)
        },
        beforeDestroy() {
            console.log('beforeDestroy', this.n)
            console.log('beforeDestroy', this)
        },
        destroyed() {
            console.log('destroyed', this.n)
            console.log('destroyed', this)
        },
    })

</script>
</html>
